<template>
	<view>
		<detail-info :item="detail"></detail-info>
	</view>
</template>

<script>
	import detailInfo from "../../components/detail/detail-info.vue"
	export default {
		components:{
			detailInfo
		},
		data() {
			return {
				detail:{
							//图文列表
							userpic:'../../static/img/daomei-img.jpg',
							username:'艾瑞利亚',
							sex:1, //0 男 1 女
							age:25,
							isguanzhu:false,
							title:'艾欧尼亚！',
							titlepic:'../../static/img/daomei.jpg',
							morepic:['../../static/img/daomei.jpg','../../static/img/wangzhe.jpg'],
							video:false,
							share:false,
							path:'广东 深圳',
							sharenum:20,
							commentnum:30,
							goodnum:20
						},
			}
		},
		onLoad(e) {
			this.initdata(JSON.parse(e.detailData))
		},
		//监听导航右边按钮
		onNavigationBarButtonTap(e){
			if(e.index==0){
				console.log("分享")
			}
		},
		methods: {
			//初始化数据
			initdata(obj){
				//修改窗口标题
				uni.setNavigationBarTitle({
				    title: obj.title
				});
			}
		}
	}
</script>

<style>

</style>
<template>
	<view>
		<detail-info :item="detail"></detail-info>
				
		<view class="u-comment-title">最新评论 {{comment.count}}</view>		
		<view class="uni-comment u-comment">
		    <block v-for="(item,index) in comment.list" :key="index">
				<comment-list :item="item" :index="index"></comment-list>
			</block>				
		</view>
		
		<view style="height: 120upx;"></view>
		
		<!-- 输入框 -->
		<user-chat-bottom @submit="submit"></user-chat-bottom>
		
		<!-- 分享 -->
		<more-share :show="shareshow" @toggle="toggle"></more-share>
	</view>
</template>

<script>
	import detailInfo from "../../components/detail/detail-info.vue"
	import time from "../../common/time.js"
	import commentList from "../../components/detail/comment-list.vue"
	import userChatBottom from "../../components/user-chat/user-chat-bottom.vue"
	import moreShare from "../../components/common/more-share.vue"
	export default {
		components:{
			detailInfo,
			commentList,
			userChatBottom,
			moreShare
		},
		data() {
			return {
				shareshow:false,
				comment:{
					count:20,
					list:[]
				},
				detail:{
							//图文列表
							userpic:'../../static/img/daomei-img.jpg',
							username:'艾瑞利亚',
							sex:1, //0 男 1 女
							age:25,
							isguanzhu:false,
							title:'艾欧尼亚！',
							titlepic:'../../static/img/daomei.jpg',
							morepic:['../../static/img/daomei.jpg','../../static/img/wangzhe.jpg'],
							video:false,
							share:false,
							path:'广东 深圳',
							sharenum:20,
							commentnum:30,
							goodnum:20
						},
			}
		},
		onLoad(e) {
			this.initdata(JSON.parse(e.detailData))
			this.getcomment()
		},
		//监听导航右边按钮
		onNavigationBarButtonTap(e){
			if(e.index==0){
				this.toggle()
			}
		},
		methods: {
			toggle(){
				this.shareshow = !this.shareshow
			},
			submit(data){
				let obj = {
					id:1,
					fid:0,
					userpic:"../../static/img/kamier.png",
					username:"卡密尔",
					time:time.gettime.gettime(new Date().getTime()),
					data:data
				};
				this.comment.list.push(obj);
			},
			// 获取评论
			getcomment(){
				let arr = [
					
						// 一级评论 
						{
							id:1,
							fid:0,
							userpic:"../../static/img/kamier.png",
							username:"卡密尔",
							time:"1608455025",
							data:"这个世界,既不黑,也不白,而是一道精致的灰",
						},
						// 子集评论
						{
							id:2,
							fid:1,
							userpic:"../../static/img/kamier.png",
							username:"卡密尔",
							time:"1608461175",
							data:"这个世界,既不黑,也不白,而是一道精致的灰",
						},
						{
							id:3,
							fid:1,
							userpic:"../../static/img/kamier.png",
							username:"卡密尔",
							time:"1608461207",
							data:"这个世界,既不黑,也不白,而是一道精致的灰",
						},
						{
							id:4,
							fid:0,
							userpic:"../../static/img/jin.jpg",
							username:"烬",
							time:"1608451408",
							data:"我从淤泥中复苏，我是灼热的青莲，我是，唯一的美",
						},
				];
				for(let i=0;i<arr.length;i++){
					arr[i].time=time.gettime.gettime(arr[i].time)
				}
				this.comment.list = arr
			},
			//初始化数据
			initdata(obj){
				//修改窗口标题
				uni.setNavigationBarTitle({
				    title: obj.title
				});
			}
		}
	}
</script>

<style>
/* 评论 */
.u-comment {
	padding: 0 20upx;
}
.more-share-title {
	padding: 20upx;
	font-size: 30upx;
	font-weight: bold;
	text-align: center;
}
.more-share-wx{
	background: #2AD198;
}
.more-share-pyq{
	background: #514D4C;
}
.more-share-wb{
	background: #EE5E5E;
}
.more-share-qq{
	background: #4A73BA;
}
</style>